<template>
	<view>
		<view class="lingmeng">
			<image class="logo" src="../../static/images/lmlogo.png"></image>
		</view>
		<view>
			<text class="text1">LingMeng Space</text>
		</view>
		<!-- <view>
			<text class="text2">Surpass Yourself</text>
		</view> -->
		<view>
			<text class="text3">Version 1.0.1<br>更新日期：2021.12.10<br>技术支持：岭梦开发队</text>
		</view>
		<button class="but" type="default" @click="tanchu()" @tap="ontips">检查更新</button>
		<transition name="info">
				<view class="tishi" v-show="popbox" id="tishitips" >
					<text>当前已是最新版本 ！</text>
				</view>
		</transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankType: uni.getStorageSync("rankState"),
				popbox: false,
			}
		},
		methods: {
			ontips(){
				this.popbox = true;
				if(this.popbox){
				    console.log(this.popbox)
				    setTimeout(()=>{
				    this.popbox = false
				},2000)
			}
		}	
	},
	}
</script>

<style lang="scss">
	page{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.lingmeng{
		padding: 30rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.logo{
			width: 250rpx;
			height: 250rpx;
		}
	}
	.text1,.text2,.text3{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.text1{
		font-size: 50rpx;
		font-weight: 600;
		color: #6495ed;
		padding: 20rpx 0rpx;
	}
		
	.text2{
		font-size: 40rpx;
		font-weight: 600;
		color: #aeecec;
	}
	.text3{
		padding: 30rpx 0rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999db2;
		line-height: 48rpx;
	}
	.but{
		margin-top: 20rpx;
		width: 280rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		border: #d9d9d9 solid 1rpx;
		color: #6d6d6d;
	}
	// .tishi{
	// 	width: 300rpx;
	// 	height: 250rpx;
	// 	background-color: #007AFF;
	// }

		.tishi {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			width: 440rpx;
			height: 260rpx;
			background-color: unset;
			border-radius: 50rpx;
			text-align: center;
			position: fixed;
			bottom: 30%;
			text {
				align-items: center;
				justify-content: center;
				display: flex;
				text-align: center;
				font-size: 34rpx;
				color: #8d8d8d;
				}
		}

	.info-enter,.info-leave-active{
		opacity: 0;
		transform: translate3d(0,20%,0);
	}
	.info-enter-active,.info-leave-active{
		transition: all .5s cubic-bezier(0.4,0,0,1.5); 
	}
</style>
